<template>
  <el-popover width="100" trigger="click" class="popover">
    <div>
      <div class="popover-title">{{ $t('CABLE_LAYING_METHOD') }}</div>
      <el-checkbox v-model="selectedAll" class="font-weight-bolder" @change="selectedAllChange">{{
        $t('ALL')
      }}</el-checkbox>
      <el-checkbox-group v-model="selected" class="pl-20">
        <el-checkbox
          v-for="method in methodList"
          :key="method.value"
          :label="method.value"
          class="popover-item"
        >{{ method.label }}</el-checkbox>
      </el-checkbox-group>
    </div>
    <el-button slot="reference" type="primary" class="ml-10">{{
      $t('CABLE_LAYING_METHOD')
    }}</el-button>
  </el-popover>
</template>
<script>
  import { mapGetters } from 'vuex'

  export default {
    data() {
      return {
        selectedAll: true,
        selected: []
      }
    },
    computed: {
      ...mapGetters(['layingMethodSelected', 'dictList']),
      methodList() {
        return [
          ...this.dictList.LAYING_METHOD,
          {
            label: this.$t('UNDEFINED'),
            value: 'UNDEFINED'
          }
        ]
      }
    },
    watch: {
      layingMethodSelected(newVal) {
        this.selected = newVal
      },
      selected(newVal) {
        this.selectedAll = newVal.length === this.methodList.length
        this.$store.commit('setLayingMethod', newVal)
      }
    },
    created() {
      if (this.layingMethodSelected.length) {
        this.selected = this.layingMethodSelected
      } else {
        this.selectedAllChange(true)
      }
    },
    methods: {
      selectedAllChange(val) {
        this.selected = val ? this.methodList.map(i => i.value) : []
        this.$store.commit('setLayingMethod', this.selected)
      }
    }
  }
</script>
<style lang="scss">
  @import '@/assets/css/mixin.module.scss';
  .popover {
    & > .el-popover__reference-wrapper{
      display: flex;
    }
    .popover-item {
      display: block;
      margin: 0;
      padding-left: 15px;
      height: 26px;
    }
    .popover-title {
      @include themeify {
        border-bottom: 1px solid themed('topoBorderColor');
      }
    }
  }

</style>
